<template>
    <div ref="chart" style="width: 100%; height: 350px;"></div>
  </template>
  
  <script>
  import * as echarts from 'echarts';
  
  export default {
    data() {
      return {
        myChart: null,
        categories: [],
        categories2: [],
        data: [],
        data2: [],
        count: 11
      };
    },
    mounted() {
      // Initialize chart
      this.myChart = echarts.init(this.$refs.chart);
  
      // Initial data setup
      this.setupData();
  
      // Set initial options
      this.setChartOptions();
  
      // Update data periodically
      setInterval(this.updateData, 2100);
    },
    methods: {
      setupData() {
        // Initialize categories and data arrays
        let now = new Date();
        for (let i = 0; i < 10; i++) {
          this.categories.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
          this.categories2.push(10 - i - 1);
          this.data.push(Math.round(Math.random() * 1000));
          this.data2.push(+(Math.random() * 10 + 5).toFixed(1));
          now = new Date(+now - 2000);
        }
      },
      setChartOptions() {
        // Options for ECharts
        const options = {
          title: {
            text: 'Dynamic Data'
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#283b56'
              }
            }
          },
          legend: {},
          toolbox: {
            show: true,
            feature: {
              dataView: { readOnly: false },
              restore: {},
              saveAsImage: {}
            }
          },
          dataZoom: {
            show: false,
            start: 0,
            end: 100
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: true,
              data: this.categories
            },
            {
              type: 'category',
              boundaryGap: true,
              data: this.categories2
            }
          ],
          yAxis: [
            {
              type: 'value',
              scale: true,
              name: 'Price',
              max: 30,
              min: 0,
              boundaryGap: [0.2, 0.2]
            },
            {
              type: 'value',
              scale: true,
              name: 'Order',
              max: 1200,
              min: 0,
              boundaryGap: [0.2, 0.2]
            }
          ],
          series: [
            {
              name: 'Dynamic Bar',
              type: 'bar',
              xAxisIndex: 1,
              yAxisIndex: 1,
              data: this.data
            },
            {
              name: 'Dynamic Line',
              type: 'line',
              data: this.data2
            }
          ]
        };
  
        // Set options
        this.myChart.setOption(options);
      },
      updateData() {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
  
        // Update data arrays
        this.data.shift();
        this.data.push(Math.round(Math.random() * 1000));
        this.data2.shift();
        this.data2.push(+(Math.random() * 10 + 5).toFixed(1));
        this.categories.shift();
        this.categories.push(axisData);
        this.categories2.shift();
        this.categories2.push(this.count++);
  
        // Update chart with new data
        this.myChart.setOption({
          xAxis: [
            { data: this.categories },
            { data: this.categories2 }
          ],
          series: [
            { data: this.data },
            { data: this.data2 }
          ]
        });
      }
    }
  };
  </script>

<style>

</style>